<template>
  <div class="prcList">
    <div v-if="!showStart">
        <Loading v-if="loading"></Loading>
        <div class="info" v-else>
          <table class="listInfo">
            <thead>
              <tr>
                <td>编号</td>
                <td>邮箱</td>
                <td>密码</td>
                <td>性别</td>
                <td>姓名</td>
                <td>电话</td>
                <td>登录次数</td>
                <td>最后登录时间</td>
                <td>最后登录ip</td>
                <td>vip会员</td>
                <td>vip优惠</td>
                <td>操作</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableData">
                <td>{{item.id}}</td>
                <td>{{item.email}}</td>
                <td>{{item.pwd}}</td>
                <td>{{item.gender|tpye}}</td>
                <td>{{item.surname}}</td>
                <td>{{item.tellphone}}</td>
                <td>{{item.login_count}}</td>
                <td>{{item.last_login_at}}</td>
                <td>{{item.last_login_ip}}</td>
                <td>{{item.is_vip|vip}}</td>
                <td v-if="item.vip_ratio!=100">{{item.vip_ratio}}</td>
                <td v-if="item.vip_ratio==100"></td>
                <td @click="update(item)"><a>修改</a></td>
              </tr>
            </tbody>
          </table>

          <div class="pageList">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="tableNum" :total="tableCont">
            </el-pagination>
          </div>
        </div>
    </div>
    
    <!--修改商品-->
      <div class="itemInfo" v-if="showStart">
        <div class="formBox">
          <p class="item"><span class="name">会员账号 ：</span><input v-model="date.email" class="slong" placeholder="请输入内容"></input></p>
          <p class="item"><span class="name">是否vip ：</span>
              <select v-model="date.is_vip">
                <option value ="1">否</option>
                <option value ="2">是</option>
              </select>
              
          </p>
          <p class="item"><span class="name">vip优惠 ：</span>
              <input v-model="date.vip_ratio" value="" class="solt" placeholder="请输入内容"></input>
          </p>
          <p class="item inputBox">
            <button @click="submit" class="submitInput">确定</button>
            <button @click="empty" class="emptyInput">取消</button>
          </p>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import axios from 'axios'
import { Get, Post,Put } from '@/config/api'
export default {
  name: 'prcList',
  data() {
    return {
      showStart:false,//修改窗口
      loading: true,
      tableData: [],
      tableNum: 20, //每页显示多少条
      tableCont: 0, //一共有多少条信息
      tablePage: 1, //当前页码
      date:{
        id:'',
        email:'',
        is_vip:'',
        vip_ratio:1
      }
    }
  },
  filters:{
      tpye(vule){
        if(vule=='1'){
          return '男'
        }else{
          return '女'
        }
      },
      vip(vule){
        if(vule=='1'){
          return ''
        }else{
          return 'vip'
        }
      }
  },
  mounted() {
    this.getData(1)
  },
  components: {
    Loading
  },
  methods: {
    //获取数据
    async getData(val) {
      let reg=await Get('/users?_sort=-is_vip&page='+val,this.$store.state.token)
      console.log(reg)
      this.tableData=reg.data
      this.tableCont=reg.meta.pagination.total
      this.loading=false
    },
    //分页
    handleCurrentChange(val) {
      this.tablePage = val
      this.getData(val)
    },
    //点击修改
    update(val){
      this.showStart=true
      this.date.id=val.id
      this.date.email=val.email
      this.date.is_vip=val.is_vip
      this.date.vip_ratio=val.vip_ratio
    },
    empty(){
      this.showStart=false
    },
    async submit(){
      let date={
        email:this.date.email,
        is_vip:this.date.is_vip,
        vip_ratio:this.date.vip_ratio
      }
      await Put('/users/'+this.date.id,this.$store.state.token,date).then((res)=>{
        this.showStart=false
        this.getData(1)
      })
    }
  }
}

</script>
